<template>
  <div class="permissions-setting">
    <h1>角色权限管理</h1>
    <el-form label-width="80px">
      <el-form-item label="选择角色"
        style="margin-bottom: 20px;">
        <el-select v-model="form.id"
          placeholder="请选择角色"
          @change="roleChange"
          :disabled="!rolefunclist">
          <el-option :label="item.name"
            :value="item.id"
            v-for="(item, index) in roleInformation"
            :key="index">{{item.name}}</el-option>
        </el-select>
        <el-button type="text"
          @click="addRole"
          v-if="addrole"
          :disabled="!rolefunclist">新增角色</el-button>
        <el-button type="text"
          @click="editRole"
          v-if="updaterole"
          :disabled="!rolefunclist">修改角色名</el-button>
        <el-button type="text"
          @click="_deleteRole"
          v-if="delrole"
          :disabled="!rolefunclist">删除</el-button>
      </el-form-item>
      <h1>角色权限管理</h1>
      <div class="permission-body">
        <div class="warpper"
          v-for="(item, index) in roleAuthorization"
          :key="index">
          <div class="warpper-body">
            <div class="warpper-left">
              <el-checkbox :label="item.funcName"
                name="type"
                v-model="item.selected"
                @change="selectedAll(item.selected, index)">{{item.funcName}}</el-checkbox>
            </div>
            <div class="warpper-middel">
              <div class="middel-child"
                v-for="(value, row) in item.children"
                :key="row">
                <div class="middel">
                  <el-checkbox-group v-model="value.selected"
                    v-if="value.url !== ''"
                    @change="childrenSelectAll(value.selected, index, row)">
                    <el-checkbox :label="value.funcName"
                      name="type"></el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="child-warpper">
                  <div class="child"
                    v-for="(key,i) in value.children"
                    :key="i"
                    @change="childrenChange(key.selected,index,row)">
                    <el-checkbox-group v-model="key.selected">
                      <el-checkbox :label="key.funcName"
                        name="type"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="information-btn">
        <el-form-item>
          <el-button type="primary"
            @click="saveSetting"
            v-if="setrolefunc">保存</el-button>
          <el-button @click="back">取消</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
// import { getRoleTheFunclist, deleteRole, setRoleTheFunclist, getRoleList } from '@/public/js/setting'
import {
  deleteRole,
  getRoleTheFunclist,
  setRoleTheFunclist,
  getRoleList
} from "@/public/js/setting";
export default {
  name: "PermissionsSetting",
  data() {
    return {
      roleInformation: [],
      number: 0,
      form: {
        id: "",
        type: ""
      },
      addRoleForm: { name: "name", description: "description" },
      editRoleForm: { name: "name", id: "id" },
      id: "",
      items: "",
      roleAuthorization: [],
      roleId: "",
      funcList: [],
      nameValue: []
    };
  },
  created() {
    this.getRoleListData();
    window.commo.showMenu(this);
  },
  mounted() {
    window.bus.$on("PermissiinsData", res => {
      console.log(res);
      this.getRoleListData();
    });
  },
  methods: {
    // 查询角色列表
    getRoleListData() {
      getRoleList().then(res => {
        console.log("res*****", res);
        this.roleInformation = res.data.adminRoles;
      });
    },
    selectedAll(val, index) {
      this.roleAuthorization[index].children.forEach(item => {
        item.selected = val;
        item.children.forEach(value => {
          value.selected = val;
        });
      });
    },
    childrenSelectAll(val, index, row) {
      this.roleAuthorization[index].children[row].children.forEach(item => {
        item.selected = val;
      });
      if (val) {
        this.roleAuthorization[index].selected = val;
      } else {
        let flag = false;
        this.roleAuthorization[index].children.forEach(e => {
          if (e.selected) {
            flag = true;
          }
        });
        if (!flag) {
          this.roleAuthorization[index].selected = val;
        }
      }
    },
    childrenChange(val, index, row) {
      if (val) {
        this.roleAuthorization[index].children[row].selected = val;
        this.roleAuthorization[index].selected = val;
      } else {
        let flag = false;
        this.roleAuthorization[index].children[row].children.forEach(e => {
          if (e.selected) {
            flag = true;
          }
        });
        if (!flag) {
          this.roleAuthorization[index].children[row].selected = val;
          let _flag = false;
          this.roleAuthorization[index].children.forEach(e => {
            if (e.selected) {
              _flag = true;
            }
          });
          if (!_flag) {
            this.roleAuthorization[index].selected = false;
          }
        }
      }
    },
    roleChange(id) {
      this.roleId = id;
      this.id = id;
      getRoleTheFunclist({ roleId: this.id }).then(res => {
        if (res.data.errCode === 0)
          this.roleAuthorization = res.data.roleFuncEntities;
      });
    },
    information(title, type, nameValue, id) {
      let sendContent = {
        title: title,
        type: type,
        nameValue: nameValue,
        id: id
      };
      window.bus.$emit("showPopover", sendContent);
    },
    addRole() {
      this.information("新增角色", "addRole");
    },
    editRole() {
      // 未选择角色
      if (!this.form.id) {
        // this.$message.warning('请选择要编辑的角色')
        this.$message({
          showClose: true,
          message: "请选择要编辑的角色",
          type: "warning",
          duration: 1000
        });
        return false;
      } else {
        this.roleInformation.forEach(e => {
          if (e.id === this.form.id) {
            this.nameValue = e.name;
          }
        });
      }
      this.information("修改角色", "editRole", this.nameValue, this.form.id);
    },
    _deleteRole() {
      // 未选择角色
      if (!this.form.id) {
        // this.$message.warning('请选择要删除的角色')
        this.$message({
          showClose: true,
          message: "请选择要删除的角色",
          type: "warning",
          duration: 1000
        });
        return false;
      }
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log(this.form.id);
          deleteRole({ id: this.form.id }).then(res => {
            console.log(res);
            if (res.data.errCode === 0) {
              this.$message.success("角色删除成功");
              this.getRoleListData();
              this.roleAuthorization = [];
              this.form.id = "";
            }
          });
        })
        .catch(() => {});
    },
    setPermissionsList() {
      this.funcList = [];
      this.roleAuthorization.forEach(item => {
        if (item.selected) {
          this.funcList.push(item.id);
        }
        item.children.forEach(value => {
          if (value.selected) {
            this.funcList.push(value.id);
          }
          value.children.forEach(child => {
            if (child.selected) {
              this.funcList.push(child.id);
            }
          });
        });
      });
    },
    saveSetting() {
      this.setPermissionsList();
      let _data = {
        timestamp: 0,
        version: "string",
        operation: "string",
        roleId: this.id,
        menuList: this.funcList
      };
      console.log(_data);
      setRoleTheFunclist(_data).then(res => {
        if (res.data.errCode === 0) {
          this.$message.success("保存成功");
          this.$emit("itemBack", "first");
        }
      });
    },
    back() {
      this.$emit("itemBack", "first");
    }
  }
};
</script>
<style lang="scss">
.permissions-setting {
  margin-bottom: 63px;
  h1 {
    text-align: left;
    color: #45a2ff;
    margin-bottom: 20px;
  }
  .el-form {
    margin-top: 20px;
    .el-form-item {
      label {
        text-align: right;
      }
      .el-form-item__content {
        margin-left: 0;
        text-align: left;
        .el-select {
          margin-right: 50px;
        }
        .page-main {
          overflow: hidden;
          border-bottom: 1px solid #e6e6e6;
          .content-l {
            padding: 20px;
            float: left;
            ul {
              display: inline-block;
              li {
                padding: 0 5px;
                float: left;
              }
            }
          }
          .content-r-l {
            float: left;
            background-color: #eef1f9;
            ul {
              display: inline-block;
              li {
                padding: 0 5px;
                float: left;
              }
            }
          }
        }
        .hotel-administer {
          overflow: hidden;
          text-align: center;
          border-bottom: 1px solid #e6e6e6;
          .hotel-l {
            float: left;
            padding: 20px;
            width: 6%;
            border-right: 1px solid #e6e6e6;
          }
          .hotel-select {
            height: 60px;
            ul {
              /*width: 80.1%;*/
              overflow: hidden;
              padding: 8px 0 6px 5px;
              background: white;
              li {
                line-height: 1.7;
                margin-left: 10px;
                float: left;
              }
            }
          }
        }
      }
    }
    .page-foot {
      background-color: #eef1f9;
      border: 1px solid #e6e6e6;
      border-bottom: none;
      .el-form-item {
        .el-form-item__content {
          margin-left: 0 !important;
          line-height: 20px;
        }
      }
    }
  }

  .permission-body {
    border-bottom: 1px solid #eef1f9;
  }
  .warpper {
    overflow: hidden;
    line-height: 30px;
  }
  .warpper-body {
    overflow: hidden;
    line-height: 28px;
    background-color: #eef1f9;
  }
  .warpper-left,
  .warpper-middle,
  .warpper-right {
    float: left;
    padding: 10px;
    text-align: left;
  }
  .warpper-left {
    width: 5%;
    background-color: #eef1f9;
  }
  .middel,
  .child {
    padding-left: 20px;
    float: left;
  }
  .child-warpper {
    width: 80%;
    float: left;
  }
  .middel {
    width: 15%;
    background-color: #e2e7f6;
    min-height: 100%;
  }
  .warpper-middel {
    overflow: hidden;
    width: 90%;
    line-height: 3.4;
    background-color: #fff;
    border-top: 1px solid #eef1f9;
  }
  .middel-child {
    display: flex;
    text-align: left;
    width: 100%;
  }
  .information-btn {
    padding: 20px 0px 20px 30px;
    text-align: left;
    position: fixed;
    bottom: 0;
    background-color: white;
    box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.1);
    width: 79.7%;
    z-index: 1000;
    .el-form-item {
      margin-bottom: 0;
      .el-form-item__content {
        margin-left: 0 !important;
      }
    }
  }
  .h-eight {
    height: 130px;
  }
  .line-h {
    width: 6%;
    line-height: 130px;
    text-align: center;
    border-right: 1px solid #e6e6e6;
  }
  .line-b-h {
    width: 3.5%;
    line-height: 4.5;
    border-right: 1px solid #e6e6e6;
  }
  .padding-b {
    line-height: 2;
    padding-bottom: 17px;
  }
  .padding-t {
    width: 73.4%;
    line-height: 2;
    padding-top: 22px;
    border-bottom: 1px solid #e6e6e6;
  }
  .hotel-l-bg {
    background-color: #eef1f9;
  }
  .el-popper[x-placement^="bottom"] {
    margin-top: 0px;
  }
}
</style>
